<!--项目档案-->
<template>
  <div class="archives">
    <div class="top-title">项目档案</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tab">
      <el-tab-pane label="基本信息" name="1">
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">基本信息</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col span="8"><span class="label">项目名称</span> {{ row.entryName}}</el-col>
            <el-col span="8"><span class="label">项目编号</span> {{ row.entryNumber}}</el-col>
            <el-col span="8"><span class="label">项目状态</span> {{ row.status}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="8"><span class="label">项目类型</span> {{ row.entryType}}</el-col>
            <el-col span="8"><span class="label">资金来源</span> </el-col>
            <el-col span="8"><span class="label">投资估算</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="8"><span class="label">立项日期</span> {{ row.date}}</el-col>
            <el-col span="8"><span class="label">预计收入</span> {{ row.income}}</el-col>
            <el-col span="8"><span class="label">负责人</span> {{ row.responsiblePerson}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="8"><span class="label">项目部门</span> {{ row.depart}}</el-col>
            <el-col span="8"><span class="label">所属单位</span> {{ row.unit}}</el-col>
            <el-col span="8"><span class="label">事由及说明</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="12"><span class="label">项目目标</span> </el-col>
            <el-col span="12"><span class="label">可研报告</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="24"><span class="label">立项附件</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="24"><span class="label">预期成果</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="12"><span class="label">取得成果</span> </el-col>
            <el-col span="12"><span class="label">成果文件</span> </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目进度" name="2">
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">项目进度</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col span="6"><span class="label">计划工期</span> 0 天(自然日)</el-col>
            <el-col span="6"><span class="label">计划开始</span>{{row.planStartTime}} </el-col>
            <el-col span="6"><span class="label">计划完成</span> {{row.planEndTime}}</el-col>
            <el-col span="6"><span class="label">任务计划</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="6"><span class="label">实际工期</span> 0 天(自然日)</el-col>
            <el-col span="6"><span class="label">实际开始</span> </el-col>
            <el-col span="6"><span class="label">实际结束</span> </el-col>
            <el-col span="6"><span class="label">结项日期</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col span="6">
              <div>
                <div class="label"> 项目进度</div>
                <el-progress :percentage="50" status="success" :show-text="false"></el-progress>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收款合同" name="3">
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">销售合同</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col span="12"><span class="label">合同名称</span>{{row.contractName}}</el-col>
            <el-col span="6"><span class="label">合同编号</span>{{row.contractNumber}}</el-col>
            <el-col span="6"><span class="label">合同金额</span>{{row.totalFee}}</el-col>
          </el-row>
        </div>
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">客户信息</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col span="12"><span class="label">客户名称</span>{{row.facingEachOther}}</el-col>
            <el-col span="6"><span class="label">客户编号</span> </el-col>
            <el-col span="6"><span class="label">法人代表</span> </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="团队成员" name="4">
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">团队成员</span>
        </div>
        <el-table :data="teamTableData" border style="width: 100%;margin-top: 10px">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="姓名" width="260"></el-table-column>
          <el-table-column prop="depart" label="部门" width="150"></el-table-column>
          <el-table-column prop="role" label="项目角色"></el-table-column>
          <el-table-column prop="tel" label="联系电话"></el-table-column>
          <el-table-column prop="illustrate" label="责任说明"></el-table-column>
          <el-table-column prop="report" label="工作报告" width="250"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="项目文件" name="5">
        <div class="tab-part">
          <span class="part-line"></span>
          <span class="part-title">项目文件</span>
        </div>
        <el-table :data="fileTableData" border style="width: 100%;margin-top: 10px">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="fileName" label="文件名称"></el-table-column>
          <el-table-column prop="fileNumber" label="文件编号"></el-table-column>
          <el-table-column prop="date" label="出具日期"></el-table-column>
          <el-table-column prop="attachment" label="文件附件"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'projectArchives',
  data() {
    return {
      activeName: '1',
      teamTableData:[
        {
          id:"1",
          name:"",
          depart:"",
          role:"",
          tel:"",
          illustrate:"",
          report:''
        }
      ],
      fileTableData:[
        {
          id:"1",
          fileName:"",
          fileNumber:"",
          date:"",
          attachment:"",
        }
      ]
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {
      },
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.archives{
  height: 500px;

  .top-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #1ab394;
    padding: 16px;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .tab {
    margin-top: 10px;

    .tab-part {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #e7eff3;
      padding-bottom: 10px;

      .part-line {
        display: inline-block;
        width: 4px;
        height: 16px;
        background-color: #1ab394;
        float: left;
        margin-top: 2px;
        margin-right: 10px;
      }

      .part-title {
        font-weight: bold;
      }
    }
    .descriptions{
      padding: 10px;
      .row{
        padding: 5px 0;
        .label{
          color: #a4a7af;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
